<template>
  <div
    class="flex-container"
    v-loading="loading"
    element-loading-text="正在发送邮件中....."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="login_panel card">
      <div class="loginTitle">
        <h2>{{ $t("reset.title") }}</h2>
      </div>
      <div>
        <div class="form_height">
          <!-- 提示 -->
          <div class="form_tip">{{ $t("reset.form_tip") }}</div>
        </div>
        <div class="login_form">
          <!-- 验证表单 -->
          <el-form
            :model="loginForm"
            :rules="rules"
            status-icon
            ref="loginForm"
            class="form_panel"
          >
            <div class="el-item">
              <el-form-item prop="username">
                <el-input
                  type="text"
                  v-model="loginForm.username"
                  autocomplete="off"
                  :placeholder="$t('reset.username')"
                  clearable
                >
                </el-input>
              </el-form-item>
            </div>
            <div class="el-item">
              <el-form-item prop="validate_code">
                <el-input
                  type="text"
                  class="class_code"
                  v-model="loginForm.validate_code"
                  autocomplete="off"
                  maxlength="4"
                  :placeholder="$t('reset.validateCode')"
                  clearable
                >
                </el-input>
                <div
                  @click="refreshCode()"
                  class="code_panel"
                  :title="$t('reset.refleshbtn_text')"
                >
                  <!--验证码组件-->
                  <SecurityCode
                    class="code"
                    :identifyCode="identifyCode"
                  ></SecurityCode>
                </div>
              </el-form-item>
            </div>
            <div class="el-item el-login-btn-panel">
              <div>
                <el-button
                  type="primary"
                  class="buttonWidth"
                  @click="submitForm('loginForm')"
                  >{{ $t("reset.next_step") }}</el-button
                >
              </div>
            </div>
            <div class="loginBottom back_link">
              <router-link to="/login">{{ $t("reset.backlogin") }}</router-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SecurityCode from "@/components/CodeComponents";
//获取统一请求接口
import { sendResetCode } from "@/api";

export default {
  name: "resetPasswordView",
  components: {
    //注册
    SecurityCode,
  },
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名或者邮箱"));
      } else {
        callback();
      }
    };

    var validateCode = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        callback();
      }
    };

    return {
      loginForm: {
        username: "",
        validate_code: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        validate_code: [{ validator: validateCode, trigger: "blur" }],
      },
      identifyCode: "", //随机组合字符串
      loading: false,
    };
  },
  mounted() {
    this.refreshCode();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //成功操作
          if (this.loginForm.validate_code.toUpperCase() == this.identifyCode) {
            this.reset();
          } else {
            this.$message.error("验证码输入错误");
            this.refreshCode();
          }
        } else {
          return false;
        }
      });
    },
    async reset() {
      this.loading = true;
      //
      let res = await sendResetCode({
        username: this.loginForm.username,
        user_email: this.loginForm.username,
      });
      if (res.state == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        //跳转到重置页面
        this.$router.push("/resetUserPass");
      } else {
        this.$message.error(res.message);
        this.loading = false;
      }
    },
    //初始化验证码
    refreshCode() {
      this.loginForm.validate_code = "";
      this.identifyCode = ""; //输入框置空
      this.makeCode(4); //验证码长度为4
    },
    //随机切换验证码
    makeCode(length) {
      let code = "";
      for (let i = 0; i < length; i++) {
        const r = Math.floor(Math.random() * 36);
        if (r < 10) {
          code += r;
        } else {
          code += String.fromCharCode(r - 10 + 65);
        }
      }
      this.identifyCode = code;
      localStorage.setItem("code", code);
    },
  },
};
</script>
  <style scoped>
/* 修改输入框默认自带的样式 */
/* /deep/ .el-form-item > div {
    margin-left: 0px !important;
  } */

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../assets/img/bg01.jpg") center center no-repeat;
  background-size: cover;
  height: 100vh;
}

.login_panel {
  width: 360px;
}

.card {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2509803922);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: scale(1);
  transition: all 0.3s;
}

.loginTitle {
  text-align: center;
  color: #fff;
  margin: 30px 0;
}

.form_height {
  margin-bottom: 10px;
}

.form_tip {
  color: #fff;
  text-align: center;
  font-size: 14px;
}

.login_form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form_panel {
  width: 90%;
}

.buttonWidth {
  height: 42px;
  width: 100%;
  font-family: PingFangSC-Semibold;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.back_link {
  padding: 10px 0;
}

.back_link a {
  font-size: 12px;
  color: #ffffff;
  text-decoration: none;
}

.class_code {
  width: 50%;
  margin-right: 20px;
}

.code_panel {
  display: inline-block;
  cursor: pointer;
}

.code {
  vertical-align: top;
}
</style>